<template>
  <z-card title="更新日志" class="z_version">
    <div class="item" v-for="(item, idx) in version">
      <div class="version_head">
        <span class="index">{{ idx + 1 }}. </span>
        <span class="label">{{ item.title }}</span>
        <span class="time">{{ dateCurrentFormat(item.time) }}</span>
      </div>
      <ul class="version_items" v-if="item.items?.length">
        <li v-for="childitem in item.items">{{ childitem.desc }}</li>
      </ul>
    </div>
  </z-card>
</template>

<script lang="ts" setup>
import { ref, reactive, type Component } from "vue";
import ZCard from "@/components/common/card/index.vue";
import type { HomeStatisticModel } from "@/api/home/index.d";
import { dateCurrentFormat } from "@/utils/date";
interface Props {
  version: HomeStatisticModel.versionResponse[];
}

const props = defineProps<Props>();
</script>
<style lang="less">
.z_version {
  .item {
    margin-bottom: 20px;
    .version_head {
      position: relative;
      .index {
        margin-right: 5px;
      }
      .label {
      }
      .time {
        position: absolute;
        right: 0;
        color: var(--color-text-2);
      }
    }
    .version_items {
      margin-top: 10px;
      color: var(--color-text-2);
      margin-left: 50px;
      li {
        line-height: 1.5rem;
      }
    }
  }
}
</style>
